<template>
  <div class="download ">
    <section class="inner_banner">
      <div class="picture_container">
        <img src="../../images/commoncard/swiperCard/downfile.png" title="资料下载inbanner" alt="资料下载inbanner"
          class="inner_banner_pc">
      </div>
    </section>
    <div class="nav">
      <div class="center flex flex_column_center   flex_row_strat">
        <div class="flex item">
          <i class="iconfont icon-zhuye-copy"></i>当前位置：<a href="/" title="">首页</a><span
            class="iconfont icon-jiantou_liebiaoxiangyou_o"></span><a href="javascript:;" title="资料下载" class="active"
            onclick="return false" @click="currentLoactiongo()">资料下载</a>
        </div>
      </div>
    </div>
    <section class="center main1 clear_float">
      <div class="inner_left">
        <div class="center" :style="dynamicStyle">
          <div class="left ">
            <div class="left_monu">
              <div class="title">
                <p class="cn">资料下载</p>
                <p class="en">Data Download</p>
              </div>
              <div class="content">
                <ul>
                  <li class="hoverTips" :class="{ active: item.active }" ref="letfNews"
                    v-for="(item, index) in downFileItems" :key="index" >
                    <div class="flex flex_column_center flex_row_justify stair" :title="item.title">{{
                      item.title }}<i class="iconfont icon-jiantou_liebiaoxiangyou_o"></i>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="left_tel">
              <img src="@/images/commoncard/qualityTel.png" alt="/服务质量监督ad2" title="/服务质量监督ad2">
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="right_title clear_float">
          <h3>{{ rightTitle }}</h3>
        </div>
        <div class="content">
          <div class="download_list hoverTips">
            <a href="javascript:;" v-for="item in filesdata" :title="item.title" class="item downloadfile">
              <div class="item_container flex flex_column_center flex_row_justify">
                <div class="item_title" @click="tagDownloadFile(item)">
                  <span class="iconfont icon-doc-line"></span>
                  <span>{{ item.title }}</span>
                </div>
                <div class="item_time">更新时间：{{ item.time }}</div>
                <div class="item_icon" @click="tagDownloadFile(item)">
                  <span class="iconfont icon-icon_huabanfuben-copy"></span>
                </div>
              </div>
            </a>
          </div>
        </div>
        <!-- 分页 -->
        <div class="paging ">
          <el-pagination background @current-change="handlePageChange" :current-page="paginationObj.currentPage"
            layout="total, prev, pager, next" :total="paginationObj.total" next-click="gotonextpage">
          </el-pagination>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import { config } from "@/common/config.js"
import scrollMixin from '@/mixins/scrollMixin';
export default {
  mixins: [scrollMixin],
  data () {
    return {
      downFileItems: [{
        title: '资料下载',
        industryCat: '',
        active: true
      },],
      filesdata: [],
      paginationObj: {
        currentPage: 1,
        total: 0,
      },
      rightTitle: '资料下载',
      listQuery: {
        pageNum: 1,
        current: 1,
        pageSize: 10,

      },

    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.queyFileList()
    },
    previewPic (code) {
      return config.url + config.prefix + '/file/previewFile?code=' + code
    },
    queyFileList () {
      let { pageNum, pageSize, current } = this.listQuery
      let params = {
        pageNum: pageNum,
        pageSize: pageSize,
        data: { tenantId: 1, industryCat: "ZJ_WJXZ", plateId: 6 },
        current: current
      }
      this.$http.post(this.$api.fileApi.listEnterpriseNews, params).then(res => {
        if (res.code == 200) {
          let result = []
          let objArray = res.data.list
          for (let [index, item] of objArray.entries()) {
            let detail = {}
            detail.title = item.title
            detail.time = item.createTime.slice(0, 10)
            detail.bgPic = this.previewPic(item.bgPic)
            result.push(detail)
          }
          this.paginationObj.total = res.data.total
          this.filesdata = result
        }
      })

    },
    handlePageChange (data) {
      this.listQuery.pageNum = data
      this.listQuery.current = data
      this.queyFileList()
    },
    tagDownloadFile(item) {
      
      let url = item.bgPic 
      let customFileName = item.title // Set your desired filename
      // Fetch the file from the server
      fetch(url)
        .then(response => response.blob())  // Convert the response to a Blob
        .then(blob => {
          // Create an object URL for the blob
          const blobUrl = URL.createObjectURL(blob);
          console.log('blobUrl', blobUrl);
          
          // Create an anchor element
          const a = document.createElement('a');
          a.href = blobUrl;
          a.download = customFileName;  // Set the custom filename for download

          // Append anchor to the document body
          document.body.appendChild(a);

          // Trigger the download by simulating a click
          a.click();

          // Clean up and remove the anchor element after download
          document.body.removeChild(a);
          URL.revokeObjectURL(blobUrl);  // Free up memory used by the object URL
        })
        .catch(error => console.error('Error downloading the file:', error));
    },
    downloadFile (url) {
     
     
      window.location.href = url
    },
    currentLoactiongo () {
      window.location.reload()
    }
  }

}
</script>
<style scoped>
@import '@/styles/portion.scss';

.paging {
  text-align: center;
}
</style>